<template>
	<view>
		<!-- 技师管理 -->
		<!-- 顶部tab -->
		<view class="tab_list">
			<view v-for="(item,index) in tab_list" :key='index' :class="{items:true,items_active:tab_index==index}" @click="tabs1(index)">{{item}}</view>
		</view>
		<!-- 新增技师 -->
		<view v-show="tab_index == 0">
			<!-- 二级tab -->
			<view class="tab">
				<!-- tab标签 -->
				<view v-for="(ite,inde) in tabslists" :key="inde" :class="{it:true,it_act:tab == inde}" @click="tablist(inde)">{{ite}}</view>
			</view>

			<view v-show="tab == 0">
				<!-- 标签内容 -->
				<view class="cust">
					<view style="padding:15rpx 0;border-bottom: 1rpx solid #E1E1E1;">
						<view class="cust-top">
							<view class="zhi">
								职位：店长
								<text class="zong">/总监/首席/设计师</text>
							</view>
							<view class="dot" @click="Dot()">
								<u-icon name="more-dot-fill" color="#333" size="24"></u-icon>
							</view>
						</view>
						<view class="cust-data">2020-05-05 15: 55: 50</view>
					</view>
					<view class="cust-cen">
						<view style="display: flex;">
							<view class="cust-img">
								<image src="/static/images/xiaochenxu.png" mode=""></image>
								<view class="xiu">周一休息</view>
							</view>
							<view class="cust-cen-con">
								<view class="cen-con-wan">
									<text class="wan-text1">张艺兴</text>
									<text class="wan-text2">美vip</text>
									<text class="wan-text3">职业等级证书/没有不显示</text>
								</view>
								<view class="con-tu">好评 4.7分｜预约 234次</view>
								<view class="con-sui">
									<text>从业：10年</text>
									<text>等级：高级</text>
								</view>
								<view class="con-fu">擅长：短发裁剪、染发设计</view>
							</view>
						</view>
						<view class="cust-right">
							<view class="dot-text">确认入职</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 在职技师 -->
		<view v-show="tab_index == 1">
			<!-- 二级tab -->
			<view class="tab">
				<!-- tab标签 -->
				<view v-for="(ite,inde) in tabslists" :key="inde" :class="{it:true,it_act:tab == inde}" @click="tablist(inde)">{{ite}}</view>
			</view>
			<!-- 美发师 -->
			<view v-show="tab == 0">
				<!-- 标签内容 -->
				<view class="cust">
					<view style="padding:15rpx 0;border-bottom: 1rpx solid #E1E1E1;">
						<view class="cust-top">
							<view class="zhi">
								职位：店长
								<text class="zong">/总监/首席/设计师</text>
							</view>
							<view class="dot" @click="Dot()">
								<u-icon name="more-dot-fill" color="#333" size="24"></u-icon>
							</view>
						</view>
						<view class="cust-data">2020-05-05 15: 55: 50</view>
					</view>
					<view class="cust-cen">
						<view style="display: flex;">
							<view class="cust-img">
								<image src="/static/images/xiaochenxu.png" mode=""></image>
								<view class="xiu">周一休息</view>
							</view>
							<view class="cust-cen-con">
								<view class="cen-con-wan">
									<text class="wan-text1">张艺兴</text>
									<text class="wan-text2">美vip</text>
									<text class="wan-text3">职业等级证书/没有不显示</text>
								</view>
								<view class="con-tu">好评 4.7分｜预约 234次</view>
								<view class="con-sui">
									<text>从业：10年</text>
									<text>等级：高级</text>
								</view>
								<view class="con-fu">擅长：短发裁剪、染发设计</view>
							</view>
						</view>
						<view class="cust-right" @click="goFiles()">
							<view class="dot-text">技师档案</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 离职技师 -->
		<view v-show="tab_index == 2">
			<!-- 二级tab -->
			<view class="tab">
				<!-- tab标签 -->
				<view v-for="(ite,inde) in tabslists" :key="inde" :class="{it:true,it_act:tab == inde}" @click="tablist(inde)">{{ite}}</view>
			</view>
			<!-- 美发师 -->
			<view v-show="tab == 0">
				<!-- 标签内容 -->
				<view style=" position: relative;">
					<view class="cust " style="color:#8F8F8F;">
						<view style="padding:15rpx 0;border-bottom: 1rpx solid #E1E1E1;">
							<view class="cust-top">
								<view class="zhi" style="color:#8F8F8F;">
									职位：店长
									<text class="zong" style="color:#8F8F8F;">/总监/首席/设计师</text>
								</view>
								<view class="dot" style="color:#8F8F8F;">
									<u-icon name="more-dot-fill" color="#333" size="24"></u-icon>
								</view>
							</view>
							<view class="cust-data" style="color:#8F8F8F;">2020-05-05 15: 55: 50</view>
						</view>
						<view class="cust-cen" style="color:#8F8F8F;">
							<view style="display: flex;">
								<view class="cust-img">
									<image src="/static/images/xiaochenxu.png" mode=""></image>
									<view style="color:#8F8F8F;" class="xiu">周一休息</view>
								</view>
								<view class="cust-cen-con">
									<view class="cen-con-wan">
										<text class="wan-text1" style="color:#8F8F8F;">张艺兴</text>
										<text class="wan-text2" style="color:#8F8F8F;">美vip</text>
										<text class="wan-text3" style="color:#8F8F8F;">职业等级证书/没有不显示</text>
									</view>
									<view class="con-tu" style="color:#8F8F8F;">好评 4.7分｜预约 234次</view>
									<view class="con-sui">
										<text style="color:#8F8F8F;">从业：10年</text>
										<text style="color:#8F8F8F;">等级：高级</text>
									</view>
									<view class="con-fu" style="color:#8F8F8F;">擅长：短发裁剪、染发设计</view>
								</view>
							</view>
							<view class="cust-right" style="color:#8F8F8F;">
								<view class="dot-text" style="background-color:#E1E1E1 ;">技师档案</view>
							</view>
						</view>
					</view>
					<view class="man">
						<view class="man1">
							<view class="man2">
								已离职
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tab_index: 0,
				tab_list: ['新增技师', '在职技师', '离职技师'],
				tabslists: ['美发师', '美容师', '化妆师', '美甲师', '增加类'],
				tab: 0
			}
		},
		methods: {
			tabs1(index) {
				this.tab_index = index
			},
			tablist(inde) {
				this.tab = inde
			},
			// 删除
			Dot() {
				uni.showModal({
					title: '删除服务',
					content: '确定要删除这个顾客吗？',
					cancelText: '取消',
					cancelColor: '#00c6c2',
					confirmText: '删除',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			// 技师档案
			goFiles() {
				uni.navigateTo({
					url: '/pagesB/technician/files'
				})
			}

		}
	}
</script>

<style>
	page {
		background-color: #EDEDED;

	}
</style>
<style lang="scss" scoped>
	.man {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		background: rgba($color: #ccc, $alpha: 0.3);

		.man1 {
			position: absolute;
			bottom: 5%;
			right: 10%;
			width: 127rpx;
			height: 126rpx;
			border: 4rpx solid #B4B4B4;
			border-radius: 50%;
		}

		.man2 {
			position: absolute;
			bottom: 4%;
			right: 6%;
			width: 109rpx;
			height: 108rpx;
			line-height: 108rpx;
			text-align: center;
			border: 4rpx solid #B4B4B4;
			border-radius: 50%;

			font-size: 29rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #414141;
			transform: rotate(-45deg);	
				
			// filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3)
		}
	}

	.tab {
		padding: 25rpx;
		background-color: #EDEDED;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.it {
			padding: 16rpx 19rpx;
			background-color: #fff;
			font-size: 24rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #2F2F2F;
		}

		.it_act {
			background-color: #00c6c2;
			font-family: PingFang;
			font-weight: bold !important;
			color: #FFFFFF !important;
		}
	}

	.tab_list {
		padding: 30rpx 30rpx 0 30rpx;
		margin: 15rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: white;

		.items_active {
			border-bottom: 4rpx solid #00C6C2;
			font-weight: bold !important;
			color: #00C6C2 !important;
		}

		.items {
			height: 60rpx;
			font-size: 32rpx;
			font-family: PingFang;
			font-weight: 500;
			color: #8A8A8A;
		}
	}

	.cust {
		padding: 15rpx 20rpx;
		background-color: #fff;
		margin-bottom: 15rpx;



		.cust-top {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.zhi {
				font-size: 28rpx;
				font-family: PingFang;
				font-weight: bold;
				color: #282828;

				.zong {
					font-size: 28rpx;
					font-family: PingFang;
					font-weight: bold;
					color: #00c6c2;
				}
			}

			.dot {
				width: 51rpx;
				height: 28rpx;
				line-height: 28rpx;
				text-align: center;
				border-radius: 40rpx;
				background-color: #F1F1F1;
				margin-left: 90rpx;
			}
		}

		.cust-data {
			font-size: 16rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #5D5D5D;
			margin-top: 10rpx;
		}

		.cust-cen {
			padding-top: 20rpx;
			display: flex;

			justify-content: space-between;

			.cust-img {

				width: 87rpx;
				height: 87rpx;
				border-radius: 50%;


				image {
					width: 100%;
					height: 100%;

				}

				.xiu {
					text-align: center;
					font-size: 16rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #282828;
				}
			}

			.cust-cen-con {
				// width: 80%;
				padding-left: 32rpx;

				.cen-con-wan {
					display: flex;
					align-items: center;

					.wan-text1 {
						font-size: 24rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #000000;
					}

					.wan-text2 {
						display: inline-block;
						width: 62rpx;
						height: 24rpx;
						line-height: 24rpx;
						text-align: center;
						font-size: 16rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #F0D9A9;
						background-color: #000;
						margin-left: 15rpx;
					}

					.wan-text3 {
						font-size: 16rpx;
						font-family: PingFang;
						font-weight: 500;
						color: #00C6C2;
					}
				}

				.con-tu {
					font-size: 20rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #414141;
					padding-top: 10rpx;
				}

				.con-sui {
					padding-top: 10rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #414141;
				}

				.con-fu {

					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #5D5D5D;
					white-space: nowrap;
					text-overflow: ellipsis;
					overflow: hidden;
					word-break: break-all;
				}
			}

			.cust-right {
				// width: 20%;



				.dot-text {
					border-radius: 5rpx;
					padding: 20rpx 24rpx;
					background-color: #00c6c2;
					font-size: 26rpx;
					font-family: PingFang;
					font-weight: 500;
					color: #FFFFFF;
					margin-top: 60rpx;
				}
			}
		}
	}
</style>
